import React, { Component, Fragment } from 'react';
import { Form } from '@ant-design/compatible';

import {
    Card, Row, Col, InputNumber,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

const valueNames = [
    '　　　大箱',
    '　　　中箱',
    '　　　小箱',
    '　　超小箱',
    '　大箱(宽)',
    '　中箱(宽)',
    '　小箱(宽)',
    '超小箱(宽)',
    '　　文件箱',
    '文件箱(宽)',
    '　　超大箱',
    '超大箱(宽)',
];

interface BuckleIntegralProps {
    getFieldDecorator: any;
    detailInfo: any;
    maxCents: any;
    maxPercentage: any;
}

// eslint-disable-next-line react/prefer-stateless-function
class BuckleIntegralElem extends Component<BuckleIntegralProps> {
    render() {
        const { getFieldDecorator, detailInfo, maxCents } = this.props;

        return (
            <Fragment>
                <Card title="格口积分配置" bordered={false}>
                    <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                        {valueNames.map((item: any, index: number) => {
                            const number = index < 9 ? `0${index + 1}` : index + 1;
                            const tips = item.replace(/\s+/g, '');
                            return (
                                <Col md={8} sm={24} key={item} style={{ display: 'flex' }}>
                                    <Form.Item label={item} colon={false} style={{ flex: 1 }}>
                                        {getFieldDecorator(`creditP109${number}`, ({
                                            initialValue: detailInfo[`creditP109${number}`],
                                            rules: [{ required: true, message: `请输入${tips}费用` }],
                                        }))(
                                            <InputNumber
                                                min={0}
                                                max={maxCents}
                                                step={1}
                                                placeholder="请输入"
                                                style={{ width: '100%' }}
                                            />,
                                        )}
                                    </Form.Item>
                                    <span className="marginL8" style={{ lineHeight: '32px' }}>分</span>
                                </Col>
                            );
                        })}
                    </Row>
                </Card>
            </Fragment>
        );
    }
}

export default BuckleIntegralElem;
